<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox" style="width: 100%;">
          <div class="content_box whitebg">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>个人中心</span>
              </span>个人中心
            </h2>

            <el-row :gutter="10">
              <el-col :span="4">
                <Left/>
              </el-col>
              <el-col :span="20">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>重置密码</span>
                  </div>
                  <div class="text item">
                    <el-form :model="form" :rules="rules" ref="form" label-width="110px">
                      <el-form-item label="id" prop="id" style="display: none;">
                        <el-input v-model="form.id" ref="id" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" ref="username" :disabled="true" placeholder="请输入用户名"
                                  autocomplete="off" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="新密码" prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入密码"
                                  autocomplete="off" clearable></el-input>
                      </el-form-item>
                      <el-form-item label="确认密码" prop="password2">
                        <el-input v-model="form.password2" type="password" placeholder="请输入密码"
                                  autocomplete="off" clearable></el-input>
                      </el-form-item>
                      <el-form-item size="large">
                        <el-button type="primary" size="small" @click="editData">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </article>
    </div>

    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Left from '../common/Left.vue'
  import { getUser, editUser } from '@/api/user'

  export default {
    components: {
      Header,
      Footer,
      Left
    },
    computed: {
      ...mapGetters([
        'userId',
      ])
    },
    data() {
      const validateData = (rule, value, callback) => {
        if (value == null || value === '' || value.length === 0) {
          callback(new Error('必填项不能为空'))
        } else {
          callback()
        }
      }
      return {
        form: {},
        rules: {
          // 要以数组形式展示
          password: [{ required: true, trigger: 'blur', validator: validateData }],
          password2: [{ required: true, trigger: 'blur', validator: validateData }]
        }
      }
    },
    created() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUser(this.userId).then(response => {
          this.form = response.data
          this.form.password = null
        })
      },
      editData() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.form.password === this.form.password2) {
              this.form.userId = this.userId
              editUser(this.form).then(response => {
                this.$message.success('重置成功')
              })
            } else {
              this.$message.error('两次密码输入不一致')
              return false
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
